//支付管理首页
import React,{Component} from 'react'
import {  Link  } from 'react-router-dom'
import {Breadcrumb,Divider ,message} from 'antd'
import * as tools from '../../../tools/tools'
import $ from 'jquery'
import './TariffManagement.css'

  class TariffManagement extends Component{
    constructor(props){
      super(props)
      this.state={
        lockoff: 0,
        profit:null
      }
    }

    componentWillMount(){
      tools.loginView(this).then(
        $.ajax({
          type:'post',
          url:tools.apiUrl+'payment/conifg_info',
          data:{
            token:localStorage.token,
            config_key:'bind_user_amount'
          },
          success:(res)=>{
            if(res.status ==1){
              $.ajax({
                type:'post',
                url:tools.apiUrl+"payment/allot_programme_list",
                data:{
                  token:localStorage.token
                },
                success:(item)=>{
                  if(item.status ==1){
                    this.setState({
                      lockoff:res.result,
                      profit:item.result.data
                    })
                  }else{
                    message.error(item.msg)
                  }
                }
              })
            }else{
              message.error(res.msg)
            }
          }
        })
      )
    }

    benefitprofit=(data)=>{
      if(data.length>2){
        return(
          <div className="traiff_tabs2">
              <div>1.{data[0].name}</div>
              <div>2.{data[1].name}</div>
              <div>3.{data[2].name}</div>
              <div>。。。</div>
          </div>
        )
      }else if(data.length ==1){
        return(
          <div className="traiff_tabs2">
              <div>1.{data[0].name}</div>
          </div>
        )
      }else if(data.length ==2){
        return(
          <div className="traiff_tabs2">
              <div>1.{data[0].name}</div>
              <div>2.{data[1].name}</div>
          </div>
        )
      }
    }

    render(){
      let children = this.benefitprofit(this.state.profit?this.state.profit:false)
      return(
          <div className="tariff_box">
            <div>
              <Breadcrumb>
                <Breadcrumb.Item >
                  支付管理
                </Breadcrumb.Item>
                <Breadcrumb.Item >
                  费率管理   
                </Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <Divider />

              <div className="traiff_content">
                <div className="traiff_title">订单管理</div>
                <Divider />
                <div className="traiff_main">
                  <div>
                    <div className="traiff_tabs">
                      <div style={{fontWeight:'bold',fontSize:'18px'}}>锁客金额</div>
                      <Link to="/HomePage/PaymentManagement/LockGuestAmount" >
                        <div style={{color:"#4A90E2",cursor:'pointer'}}>更多</div>
                      </Link>
                    </div>
                    <hr style={{border: '1px solid #e8e8e8'}}/>
                    <div className="traiff_tabs2">
                      <div>锁客金额: {this.state.lockoff.value}元</div>
                      <div>最后编辑于: {new Date(this.state.lockoff.updated_at * 1000).toLocaleDateString()}</div>
                    </div>
                  </div>
                  <div>
                    <div className="traiff_tabs">
                      <div style={{fontWeight:'bold',fontSize:'18px'}}>分润模板</div>
                      <Link to="/HomePage/PaymentManagement/SplittingTemplate">
                        <div style={{color:"#4A90E2",cursor:'pointer'}}>更多</div>
                      </Link>
                    </div>
                    <hr style={{border: '1px solid #e8e8e8'}}/>
                    {children}
                  </div>
                </div>
              </div>

          </div>

      )
    }
 }

 export default TariffManagement
